<template>
    <div class="loginContain">
        <!-- <mt-header fixed title="登录" class="head"></mt-header> -->
        <mt-header >
            <span id="head_title" slot="left">登陆小老弟点餐系统</span>
            
            <router-link to="/view/register" tag="span"  slot="right">注册</router-link>
        </mt-header>

        <div class="context">
            <div class="topContext">
                <form class="mui-input-group" id="formID">
					<div class="mui-input-row">
						<input type="text" placeholder="请输入邮箱或手机账号"  @blur="verifyBlur('userName',userName,'userNameErrorMsg')"   v-model="userName">
					</div>
                    <div class="errorMsg" v-show="verifyResult.userNameErrorMsg != null" ><span>{{verifyResult.userNameErrorMsg}}</span></div>


					<div class="mui-input-row">
						<input type="password" class="mui-input-clear"  placeholder="请输入密码"  @blur="verifyBlur('notNull',password,'passwordErrorMsg')"  v-model="password">
					</div>
                    <div class="errorMsg" v-show="verifyResult.passwordErrorMsg != null" ><span>{{verifyResult.passwordErrorMsg}}</span></div>


                </form>
                <mt-button @click="loginClick()" id="loginButton" size="large" type="primary">登录</mt-button>
            </div>

            <div class="centContext">
                <div class="centContextP">忘记密码</div>
                <div class="centContextP">短信登录</div>
            </div>

            <div class="footContext">
                    <p>登录代表你已同意《小老弟用户协议》</p>
            </div>
       </div>


       
    </div>


    
</template>


<script>
import { Toast } from 'mint-ui';
import Vue from "vue" 

g_username = {};

export default {
    data(){
        return {
            userName:"",
            password:"",
            verifyList:verifyList,
            verifyResult:{}
        }
    },
    created(){
        
        this.loginType =  this.$route.query.type;
        if(this.loginType == "notLogin"){
            Toast("请先登录")
        }
    },
    methods:{
        loginClick(){
              for(vitemKey in this.verifyResult){
                let value = this.verifyResult[vitemKey];
                if(value != null){
                    Toast(`请正确填写参数:${value}`);
                    return;
                }
            }

            let data={
                email:g_username.email,
                password:this.password,
                phone:g_username.phone
            }

            this.$http.post("user/login",data).then(res=>{
                if(!res.ok){
                    Toast("登录连接失败");
                }
                let body = res.body;
                 if(!body.success){
                    Toast(body.msg);
                    return;
                }
                let data = body.data;
                Vue.prototype.loginUser = data;
                this.$router.push({path:"/main"})                
                Toast("登录成功");
                
            });


        },
        verifyBlur(verfiy,vaule,resultMsgName){
            let fun =  this.verifyList[verfiy];
            if(fun == null){
                return ;
            }
            let verifyMsg = fun(vaule);
            this.$set(this.verifyResult,resultMsgName,verifyMsg)
        },
    }
}

let verifyList = {
    userName(value){
        g_username.phone = null;
        g_username.email = null;

        if(value == null || value == ""){
            return "账号不能为空";
        }
        isEmail =  isNaN(value);
        if(isEmail){
           let reuslt =  value.match(/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/)
            if(reuslt == null){
                return "邮箱账号不正确";
            }
            g_username.email = value;

        }else{
           let reuslt =  value.match(/^1(3|4|5|7|8)\d{9}$/)
            if(reuslt == null){
                return "手机号码不正确";
            }
            g_username.phone = value;

        }
        return null;
    },


    notNull(value){
         if(value == null || value == ""){
            return "该项不能为空";
        }
        return null;
    }
}


function setCookie(name,value) 
{ 
    var Days = 5; 
    var exp = new Date(); 
    exp.setTime(exp.getTime() + Days*24*60*60*1000); 
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); 
} 
          

</script>


<style scoped>
    .context{
        margin-top: 10px;
        padding-left: 14px;
        padding-right: 14px;
    }
    .mui-input-row{
        margin-bottom: 8px;
        margin-top: 15px;
    }

    .mui-input-group:before{
       height: 0px;
    }

    .mui-input-group:after{
       height: 0px;
    }
    
    #formID{
        padding-right: 12px;
        padding-top: 10px;
    }
    
    #loginButton{
        background-color: #1caf0a;
        margin-top: 15px;
        
    }

    #head_title{
        margin-left: 24px;
        font-weight: bold;
        font-size: 17px;
    }
    .footContext{
        position: absolute;
        bottom: 10px;
        width: 90%;
        text-align: center;
    }
    .footContext p{
        font-size: 12px;
    }

    .centContext{
        margin-top: 35px;
        width: 100%;
        text-align: center;
    }

    .centContextP {
        color: #d19d03;
        display: inline-block;
        font-size: 14px;
        border-right: 1px solid  #878080;
        padding-right: 10px;
        padding-left: 5px;
         height: 12px;
        line-height: 12px;
    }
    .centContextP:last-child{
        border-right: 0px
    }

     .errorMsg{
        display: flex;
        color: red;
        justify-content: space-around;
        font-family: sans-serif;
        font-size: 12px;
    }
    


   
</style>

